<template>
    <div class="loading">
        <div class="logo" v-show="showProcess"></div>
        <div class="textBar" v-show="!showProcess"></div>
        <div class="blankBar" v-show="!showProcess">
            <div class="loadingBar" :style="{'width': rate +'%'}"></div>
        </div>
    </div>
</template>

<script>
    import Img from '../../img/img';
    import musicURL from '../../music/lancome.mp3';
    export default {
        props: ['resources'],
        data() {
            return{
                count: 0,
                rate: 0,
                showProcess: true,
            }
        },
        mounted() {
            setTimeout(() =>{
                this.loadingFun();
                this.showProcess = false;
            }, 1000);
        },
        methods: {
            loadingFun() {
                Array.from(Img).forEach((item, index) => {
                    let img = new Image();
                    img.src = item;
                    img.onload = () => {
                        this.count ++;
                        this.rate = Math.floor((this.count / Img.length) * 100);

                        this.count == Img.length ? this.$emit('update:pageType', 'fp') : '';
                     };
                });

            },
        },
    }
</script>
<style lang="less" scoped>
    .loading{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        background: rgb(2, 149, 104);
        z-index: 99999;
        .logo{
            width: 2.88rem;
            height: 2.68rem;
            position: absolute;
            bottom: 8.49rem;
            left: 3.56rem;
            background-image: url("../../img/loading/logo.png");
            background-size: 100%;
            background-repeat: no-repeat;
            -webkit-animation: bounce 1s;
            -o-animation: bounce 1s;
            animation: bounce 1s;
        }
        @keyframes bounce {
            from, 20%, 53%, 80%, to {
                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                transform: translate3d(0,0,0);
            }

            40%, 43% {
                animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
                transform: translate3d(0, -30px, 0);
            }

            70% {
                animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
                transform: translate3d(0, -15px, 0) scaleY(1);
            }

            90% {
                transform: translate3d(0,-4px,0) scaleY(0.4);
            }

            100%{
                transform: scaleY(0.1);
            }

        }

        .blankBar{
            height: 0.19rem;
            width: 4.17rem;
            position: absolute;
            bottom: 9.43rem;
            left: 2.92rem;
            .loadingBar{
                height: 0.19rem;
                background-image: url("../../img/loading/loadingBar.png");
                background-size: auto 100%;
                background-repeat: no-repeat;
            }
        }
        .textBar{
            width: 4.17rem;
            height: 0.72rem;
            background-image: url("../../img/loading/textBar.png");
            background-size: 100%;
            background-repeat: no-repeat;
            position: absolute;
            bottom: 8.9rem;
            left: 2.92rem;

        }
    }
</style>